<template>
  <div class="teacher-detail">
    <i class="iconfont icon-fanhui fanhui" @click="back"></i>
    <img src="../static/img/shoucang.png" alt="" class="shoucang">
    <p class="title">教师详情页</p>
    <div class="teacher-container">
      <img :src="teacher.avatar" alt="" class="avatar">
      <div class="message">
        <div class="top">
          <p class="name">{{teacher.name}}</p>
          <p class="price">￥{{teacher.price}}起</p>
        </div>
        <div class="center">
          <div class="stars">
            <img v-for="(item,index) in teacher.star" class="star" src="../static/img/star.png" alt="">
          </div>
          <p class="text">{{teacher.teachCourse}}|教龄{{teacher.teachYear}}|已授{{teacher.teachAllCourse}}</p>
        </div>
        <div class="bottom">
          <span v-for="(item2,index) in teacher.some">{{item2}}</span>
          <span>{{teacher.goodTalk}}好评</span>
        </div>
      </div>
    </div>
    <div class="student-talk">
      <span class="student-title">学生评价</span>
      <div class="top">
        <div class="left">
          <img width="50px" height="50px" src="../static/img/xiaolian.png" alt="">
          <div class="stars">
            <img v-for="(item,index) in teacher.studentTalk.start" src="../static/img/star.png" alt="" class="star">
          </div>
        </div>
        <div class="right">
          <p>效果满意率：{{teacher.studentTalk.rate1}}</p>
          <p>服务满意率：{{teacher.studentTalk.rate2}}</p>
        </div>
      </div>
      <div class="bottom">
        <span v-for="(item,index) in teacher.studentTalk.other">{{item.text}} {{item.count}}</span>
      </div>
    </div>
    <input type="button" value="在线咨询" class="submit">
  </div>
</template>

<script>
  export default {
    data() {
      return {
        teacher: {
          avatar: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1424990591,1336401881&fm=27&gp=0.jpg',
          name: '小初高数学麦老师',
          price: 230,
          star: 4,
          teachYear: 18,
          teachAllCourse: 223,
          goodTalk: 2,
          teachCourse: '一年级数学',
          some: [
            '在线课',
            '朋友团',
            '杯赛经验',
            '基础提高',
            '中考'
          ],
          studentTalk: {
            rate1: '100%',
            rate2: '100%',
            start: 4,
            other: [
              {
                text: '内容丰富',
                count: 2
              },
              {
                text: '很亲切',
                count: 2
              },
              {
                text: '有针对性',
                count: 2
              },
              {
                text: '备课充分',
                count: 2
              },
              {
                text: '思路清晰',
                count: 2
              },
              {
                text: '讲课认真',
                count: 2
              },
            ]
          }
        }
      }
    },
    methods: {
      back() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style scoped>
  .teacher-detail {
    position: relative;
    margin-bottom: 50px;
  }

  .fanhui {
    position: absolute;
    left: 15px;
    width: 25px;
    height: 25px;
    font-size: 18px;
  }

  .title {
    text-align: center;
    font-size: 18px;
    margin-top: 15px;
  }

  .shoucang {
    position: absolute;
    right: 15px;
    width: 35px;
    height: 35px;
  }

  .teacher-container {
    margin-top: 25px;
    margin-left: 25px;
  }

  .teacher-container .avatar {
    display: block;
    width: 80px;
    height: 80px;
  }

  .teacher-container .message .top {
    display: flex;
  }

  .teacher-container .message .top .name {
    flex: auto;
    font-size: 18px;
  }

  .teacher-container .message .price {
    flex: auto;
    text-align: right;
    color: orange;
  }

  .teacher-container .message .center {
    display: flex;
    margin: 5px 0;
  }

  .teacher-container .message .center .star {
    flex: 1;
    width: 15px;
    height: 15px;
  }

  .teacher-container .message .center .text {
    flex: 1;
    font-size: 15px;
    color: #ccc;
  }

  .teacher-container .message .bottom {
    display: flex;
  }

  .teacher-container .message .bottom span {
    flex: auto;
    background: #F0F0F0;
    margin-left: 3px;
    font-size: 13px;
    text-align: center;
    color: #ccc;
    border-radius: 3px;
  }

  .student-talk {
    margin-top: 25px;
  }

  .student-talk .student-title {
    display: block;
    border-left: 2px solid #06cd56;
    margin-left: 15px;
    padding: 0 0 0 5px;
  }

  .student-talk .top {
    display: flex;
    align-items: center;
    margin-top: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
  }

  .student-talk .top .left {
    flex: 1;
    text-align: center;
  }

  .student-talk .top .left .star {
    width: 20px;
    height: 20px;
  }

  .student-talk .top .right {
    flex: 1;
  }

  .student-talk .bottom:after {
    content: '';
    clear: both;
    display: block;
    visibility: hidden;
  }

  .student-talk .bottom span {
    float: left;
    padding: 5px;
    border: 1px solid #ccc;
    margin-left: 15px;
    margin-top: 15px;
    border-radius: 5px;
    font-size: 13px;
    color: #ccc;
  }

  .submit {
    display: block;
    clear: both;
    border: 0 none;
    outline: 0 none;
    width: 60%;
    height: 45px;
    background: #06cd56;
    color: #fff;
    border-radius: 25px;
    margin: 25px auto
  }
</style>
